<template>
    <div class="box">
        <div class="swiper_box">
            <div class="prev" v-if="showBtn" :class="{ disable: leftBtn == require('./img/leftDisable.png') }">
                <img :src="leftBtn" alt="" class="swiper-button" @click="clickPrev">
            </div>
            <div class="swiper_">
                <div class="card-container" ref="container">
                    <div class="item" v-for="(item, index) in dataList" :key="index">
                        <card-templete :color="item.color" :num="item.num" :receiveInfo="item.receiveInfo"
                            :receiveMoney="item.receiveMoney" :title="item.title" :unit="item.unit">
                        </card-templete>
                    </div>
                </div>
            </div>
            <div class="next" v-if="showBtn" :class="{ disable: rightBtn == require('./img/rightDisable.png') }">
                <img :src="rightBtn" alt="" class="swiper-button" @click="clickNext">
            </div>
        </div>
    </div>
</template>

<script>
import cardTemplete from "./card/index.vue"
export default {
    props: {
        dataList: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            let width = this.dataList.length * 146.857
            if (width > this.$refs.container.offsetWidth) {
                this.showBtn = true
            } else {
                this.showBtn = false
            }
        })
    },
    data() {
        return {
            //左边点击按钮图片
            leftBtn: require('./img/left.png'),
            //右边点击按钮图片
            rightBtn: require('./img/right.png'),
            maxScroll: 0,
            showBtn: false
        }
    },
    components: {
        cardTemplete
    },
    computed: {
        // showBtn() {
        //     
        // }
    },
    methods: {
        /* 前一步 */
        clickPrev() {
            this.rightBtn = require('./img/right.png')
            if (this.$refs.container.scrollLeft == 0) {
                this.leftBtn = require('./img/leftDisable.png')
            } else {
                this.leftBtn = require('./img/left.png')
                // console.log(this.$refs.container.scrollLeft);
                // this.$refs.container.scrollLeft -= 146.857
                this.smoothScroll(this.$refs.container, -146.857);
            }
        },
        /* 后一步 */
        clickNext() {
            const scrollMax = this.$refs.container.scrollWidth - this.$refs.container.clientWidth;
            console.log(scrollMax);
            this.leftBtn = require('./img/left.png')
            if (this.$refs.container.scrollLeft >= scrollMax - 1) {
                this.rightBtn = require('./img/rightDisable.png')
            } else {
                this.rightBtn = require('./img/right.png')
                console.log(this.$refs.container.scrollLeft);
                // this.$refs.container.scrollLeft += 146.857
                this.smoothScroll(this.$refs.container, 146.857);
            }
        },

        smoothScroll(element, distance) {
            let scrolling = false
            if (!scrolling) {
                scrolling = true;
                //开始时间
                const start = element.scrollLeft;
                //确定起始时间
                const startTime = performance.now();
                function step(timestamp) {
                    const progress = (timestamp - startTime) / 500;
                    element.scrollLeft = start + distance * progress;
                    if (progress < 1) {
                        requestAnimationFrame(step);
                    } else {
                        scrolling = false;
                    }
                }
                requestAnimationFrame(step);
            }
        }
    }

}
</script>

<style lang="scss" scoped>
.disable {
    cursor: no-drop !important;
}

.prev {
    cursor: pointer;
}

.next {
    cursor: pointer;
}

.swiper_box {
    width: 100%;
    // max-width: 1128px;
    background: #fff;
    padding: 0 20px;
    margin-top: 17px;

    >div {
        display: inline-block;
        vertical-align: middle;
    }

    .swiper-button {
        width: 20px;
        height: 20px;
        // cursor: pointer;
        text-align: center;
        padding: 0;
        font-weight: 500;
    }

    .swiper_ {
        width: calc(100% - 60px);
        margin: 0 10px;

        .card-container {
            width: 100%;
            height: 200px;
            overflow-x: hidden;
            white-space: nowrap;
            display: flex;
            flex-wrap: nowrap;

            .item {
                flex: 0 0 134.29px;
                height: 160px !important;
                margin-left: 12.567px;
            }
        }
    }
}
</style>